<template>
	<div class="layout-padding">
		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="首页文章" name="first"></el-tab-pane>
			<el-tab-pane label="今日煤迅" name="second"></el-tab-pane>
			<el-tab-pane label="交易数据" name="third"></el-tab-pane>
		</el-tabs>
		<!-- 首页文章以及今日煤迅表格区域 -->
		<div v-if="activeName == 'first' || activeName == 'second'">
			<el-form ref="searchFormRef" :model="searchForm">
				<el-row class="mb-20">
					<el-col :span="6">
						<el-form-item label="文章标题" prop="invitationTitle" label-width="100px">
							<el-input v-model="searchForm.invitationTitle" />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="编辑人员" prop="createUserName" label-width="100px">
							<el-input v-model="searchForm.createUserName" />
						</el-form-item>
					</el-col>
					<el-col :span="6" :offset="1">
						<el-form-item>
							<el-button formDialogRef icon="search" type="primary" @click="handleSearch"> 搜索 </el-button>
							<el-button icon="Refresh" formDialogRef @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="mb-20">
				<el-button type="primary" @click="handleAddClick">新增</el-button>
			</div>
			<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" show-overflow-tooltip>
				<el-table-column type="index" width="100" label="#" />
				<el-table-column prop="invitationTitle" label="文章标题" />
				<el-table-column prop="createUserName" label="编辑人员" />
				<el-table-column prop="contactPhone" label="文章简介" show-overflow-tooltip />
				<el-table-column prop="invitationText" label="文章内容" show-overflow-tooltip />
				<el-table-column prop="address" label="发布时间" />
				<el-table-column label="操作" width="140">
					<template #default="scope">
						<el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex-center">
				<el-pagination
					v-model:current-page="currentPage"
					v-model:page-size="pageSize"
					:page-sizes="[100, 200, 300, 400]"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
				/>
			</div>
			<el-dialog v-model="centerDialogVisible" title="新增" width="75%" align-center>
				<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm" :size="formSize" status-icon>
					<el-form-item label="文章标题" prop="invitationTitle">
						<el-input v-model="ruleForm.invitationTitle" />
					</el-form-item>
					<el-form-item label="编辑人员" prop="createUserName">
						<el-input v-model="ruleForm.createUserName" />
					</el-form-item>
					<el-form-item label="文章简介" prop="createUserName">
						<el-input v-model="ruleForm.contactPhone" type="textarea" />
					</el-form-item>
					<el-form-item label="编辑文章" prop="invitationText">
						<editor v-model:get-html="ruleForm.invitationText" height="600px" />
					</el-form-item>
				</el-form>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="handleDialogClose">关闭</el-button>
						<el-button type="primary" @click="handleFormAddClick()"> {{ addOrEdit ? '编辑' : '新增' }} </el-button>
					</span>
				</template>
			</el-dialog>
		</div>
		<div v-else>
			<Trading />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { fetchList, putObj, delObjs, addObj } from '/@/api/coalSystem/Invitation';
import { ElMessage } from 'element-plus';

// import Trading from './components/trading.vue';
const Trading = defineAsyncComponent(() => import('./components/trading.vue'));
const Editor = defineAsyncComponent(() => import('/@/components/Editor/index.vue'));

// tabs逻辑
const activeName = ref('first');
const handleClick = (tab) => {
	activeName.value = tab.props.name;
	searchForm.value.invitationTitle = '';
	searchForm.value.createUserName = '';
	if (tab.props.name !== 'third') {
		getFetchList();
	}
};
// 表格内容逻辑
const tableRowClassName = ({ row, rowIndex }: { row: User; rowIndex: number }) => {
	if (rowIndex === 1) {
		return 'warning-row';
	} else if (rowIndex === 3) {
		return 'success-row';
	}
	return '';
};
const tableData = ref([]);
// 表格分页
const ruleFormRef = ref();
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
onMounted(() => {
	getFetchList();
});
// 表单搜索
const searchFormRef = ref();
const searchForm = ref({
	invitationTitle: '',
	createUserName: '',
});
const handleSearch = () => {
	currentPage.value = 1;
	pageSize.value = 10;
	getFetchList();
};
const resetQuery = () => {
	searchFormRef.value.resetFields();
	currentPage.value = 1;
	pageSize.value = 10;
	getFetchList();
};
const getFetchList = () => {
	fetchList({
		invitationType: activeName.value == 'first' ? 1 : 2,
		current: currentPage.value,
		size: pageSize.value,
		...searchForm.value,
	})
		.then((res: any) => {
			const { code, msg, data } = res;
			if (code == 0) {
				tableData.value = data.records;
				total.value = data.total;
			} else {
				ElMessage({
					message: msg,
					type: 'warning',
				});
			}
		})
		.finally(() => {
			// loading.value = false;
		});
};
// 表格删除
const handleDelete = (index, row) => {
	delObjs(row.invitationId).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '删除成功',
				type: 'success',
			});
			centerDialogVisible.value = false;
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};

const handleSizeChange = (val: number) => {
	pageSize.value = val;
	getFetchList();
};
const handleCurrentChange = (val: number) => {
	currentPage.value = val;
	getFetchList();
};
// -----------------------------------------弹窗逻辑---------------------------
const centerDialogVisible = ref(false);
const ruleForm = ref({
	invitationTitle: '',
	createUserName: '',
	invitationText: '',
	invitationType: 1,
	contactPhone: '',
});
const rules = reactive({
	invitationTitle: [{ required: true, message: '请输入', trigger: 'blur' }],
	createUserName: [{ required: true, message: '请输入', trigger: 'blur' }],
	contactPhone: [{ required: true, message: '请输入', trigger: 'blur' }],
});
const handleAddClick = () => {
	centerDialogVisible.value = true;
};
let addOrEdit = ref(false);
// 新增
const handleFormAddClick = (formEl, row) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			if (addOrEdit.value) {
				editInfo();
				ruleForm.value['invitationType'] = activeName.value == 'first' ? 1 : 2;
			} else {
				ruleForm.value['invitationType'] = activeName.value == 'first' ? 1 : 2;
				addInfo();
			}
		}
	});
};
// 开启编辑弹窗
const handleEdit = (row) => {
	nextTick(() => {
		ruleForm.value = row;
	});
	centerDialogVisible.value = true;
	addOrEdit.value = true;
};
// 弹窗关闭
const handleDialogClose = () => {
	ruleFormRef.value.resetFields();
	centerDialogVisible.value = false;
};
// 新增
const addInfo = () => {
	addObj({
		...ruleForm.value,
	}).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '新增成功',
				type: 'successs',
			});
			handleDialogClose();
			addOrEdit.value = false;
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
// 编辑
const editInfo = () => {
	putObj({
		...ruleForm.value,
	}).then((res) => {
		const { code, msg } = res;
		if (code === 0) {
			ElMessage({
				message: '更新成功',
				type: 'success',
			});
			handleDialogClose();
			addOrEdit.value = false;
			getFetchList();
		} else {
			ElMessage({
				message: msg,
				type: 'warning',
			});
		}
	});
};
</script>
<style scoped>
.mb-20 {
	margin-bottom: 20px;
}

.el-pagination {
	justify-content: center !important;
}
</style>
